import { Checkbox } from "antd"
import { forwardRef, Ref, useImperativeHandle, useState } from "react"

import { useLocale } from "@/locales"

const AgentCheck = (_props: any, ref: Ref<unknown> | undefined) => {
	const { newFormat } = useLocale()
	const plainOptions = [
		{ label: newFormat("label.agent.self"), value: "self" },
		{ label: newFormat("label.agent.direct"), value: "direct" },
		{ label: newFormat("label.agent.allSub"), value: "allSub" }
	]
	const defaultCheckedList = ["self"]
	const [checkedList, setCheckedList] = useState<string[]>(defaultCheckedList)
	const onChange = (list: string[]) => {
		setCheckedList(list)
	}
	const onCheckAllChange = (e: any) => {
		setCheckedList(e.target.checked ? plainOptions.map(item => item.value) : [])
	}
	const checkAll = plainOptions.length === checkedList.length
	useImperativeHandle(ref, () => {
		return {
			getCheckList() {
				return checkedList
			},
			setCheckedList
		}
	})
	return (
		<div className="flxR aiC">
			<Checkbox onChange={onCheckAllChange} checked={checkAll}>
				{newFormat("label.agent.all")}
			</Checkbox>
			<Checkbox.Group options={plainOptions} value={checkedList} onChange={onChange} />
		</div>
	)
}

export default forwardRef(AgentCheck)
